import React, { Component } from 'react';
import { Divider, Button, Modal, Form, Input, Row, Col, Select, Radio, Table, Card, Icon, Popconfirm, message, Spin} from 'antd';
import { connect } from 'dva';
import styles from '../style.less';
import copy from 'copy-to-clipboard';


const selectOptions = [
    {value: '西乡街道', key: '西乡街道'},
    {value: '宝安街道', key: '宝安街道'},
    {value: '龙岗街道', key: '龙岗街道'},
    {value: '南山街道', key: '南山街道'},
    {value: '龙华街道', key: '龙华街道'},
    {value: '罗湖街道', key: '罗湖街道'},
]

const children = []
selectOptions.forEach(v => {
    children.push(<Select.Option value={v.key} key={v.key}>{v.value}</Select.Option>)
})



// 新增管理员
const AddAdministrator = Form.create()(
    // eslint-disable-next-line react/prefer-stateless-function
    class extends React.Component {
        
        copyHandleClick = () => {  
            copy('123456789')
            message.success('复制成功！')
        }

        render() {
            const { visible, onCancel, onCreate, form, loading, streets } = this.props
            const { getFieldDecorator } = form
            const formItemLayout = {
                labelCol: { span: 8 },
                wrapperCol: { span: 14 }
            }
            return (
                <Spin spinning={loading}>
                    <Modal
                        visible={visible}
                        title="新增管理员"
                        width='60%'
                        onCancel={onCancel}
                        onOk={onCreate}
                        forceRender
                    >
                        <Form style={{width: '80%', margin:'0 auto'}}>
                            <Row gutter={24}>
                                <Col span={24}>
                                    <Form.Item label="管理员名称" {...formItemLayout} required={false}>
                                        {getFieldDecorator('manage_name', {
                                            rules: [{ required: true, message: '请输入!'}],
                                        })(<Input placeholder="请输入" style={{width:'80%'}}/>)}
                                    </Form.Item>
                                </Col>
                                <Col span={24}>
                                    <Form.Item label="负责街道" {...formItemLayout} required={false}>
                                        {getFieldDecorator('manage_street', {
                                            rules: [{ required: true, message: '请选择!'}],
                                        })(
                                            <Select placeholder="请选择" style={{width: '80%'}}>
                                                {/* {children} */}
                                                {streets}
                                            </Select>
                                        )}
                                    </Form.Item>
                                </Col>
                                <Col span={24}>
                                    <Form.Item label="账户名称" {...formItemLayout} required={false}>
                                        {getFieldDecorator('user_name', {
                                            rules: [{ required: true, message: '请输入!'}],
                                        })(<Input placeholder="请输入" style={{width:'80%'}}/>)}
                                    </Form.Item>
                                </Col>
                                <Col span={24}>
                                    <Form.Item label="账号密码" {...formItemLayout} required={false}>
                                        <span>
                                            123456789
                                        </span>
                                        <a style={{marginLeft: '10px'}} onClick={this.copyHandleClick}>复制</a>
                                    </Form.Item>
                                </Col>
                                <Col span={24}>
                                    <Form.Item label="账号状态" {...formItemLayout} required={false}>
                                        {getFieldDecorator('status', {
                                            rules: [{ required: true, message: '请选择!'}],
                                        })(
                                            <Radio.Group onChange={this.onChange}>
                                                <Radio value={1}>启用</Radio>
                                                <Radio value={0}>禁用</Radio>
                                            </Radio.Group>
                                        )}
                                    </Form.Item>
                                </Col>
                            </Row>
                        </Form>
                    </Modal>
                </Spin>
            )
        }
    }
)


@connect(({ usersystemdandtable }) => ({
    usersystemdandtable
}))

class Index extends Component {
    state = {
        // 新增企业弹窗
        addVisible: false,
        uploading: false,
        streets: []
    }

    componentDidMount () {
        
        // 获取街道
        this.streetsInit()
    }

    streetsInit = () => {
        const { dispatch } = this.props
        dispatch({
            type: 'usersystemdandtable/fetchStreets',
        }).then(res => {
            if (res.status === 200) {
                const streets = []
                res.data.forEach(v => {
                    streets.push(<Select.Option value={v.Id} key={v.Id}>{v.Name}</Select.Option>)
                })
                this.setState({
                    streets
                })
            }
            
        })
    }

    saveFormRef = formRef => {
        this.formRef = formRef
    }

    showModal = () => {
        this.setState({ addVisible: true })
    }

    handleCancel = () => {
        this.setState({ addVisible: false })
    }

    // 新增管理员
    handleCreate = () => {
        const { dispatch, create } = this.props
        const { form } = this.formRef.props
        form.validateFields((err, values) => {
            if (err) {
                return;
            }
            this.setState({
                uploading: true
            })
            dispatch({
                type: 'usersystemdandtable/addUser',
                payload: values
            }).then(res => {
                if (res === 200) {
                    this.setState({
                        uploading: false,
                        addVisible: false
                    })
                    form.resetFields()
                    message.success('成功')
                    // 根据当前页面刷新数据
                    //
                    create()
                }
            })
        })
        
    }

    render () {

        return (
            <>
                <Button icon="plus" type="primary" className={styles.plusCompany} onClick={this.showModal}>新增管理员</Button>


                <AddAdministrator 
                    wrappedComponentRef={this.saveFormRef}
                    visible={this.state.addVisible}
                    onCancel={this.handleCancel}
                    onCreate={this.handleCreate}
                    loading={this.state.uploading}
                    streets={this.state.streets}
                />
            </>
        )


    }

}



export default Form.create()(Index);
